<!-- 分销海报 -->
<template>
	<view class="v-distribution-poster">
		<!-- 海报 -->
		<image :src="path" mode="widthFix" @click="handlePreviewImg([path], 0)" style="border-radius: 10rpx;width: 750rpx;"></image>
		<!-- basePainter 当path（海报路径为空）时进入失败返回绘制海报 -->
		<sunui-painter
			isRenderBlob
			custom-style="position: fixed; left: 200%;"
			:isRenderImage="true"
			:board="basePainter"
			@success="getSuccessInfo"
			@fail="getFailInfo"
		></sunui-painter>
		<view class="flex-between v-btn" v-if="path">
			<view class="v-sava flex" @click="save()">
				<text class="iconfont">&#xe662;</text>
				<view>保存图片</view>
			</view>
			<view class="v-share flex" @click="shareImg()">
				<text class="iconfont">&#xe624;</text>
				<view>立即分享</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			basePainter: {},
			path: '',
			// 海报
			poster: uni.getStorageSync('brokerageIndex').qrcode?uni.getStorageSync('brokerageIndex').qrcode:'',
			// 背景图
			bj: uni.getStorageSync('brokerageSet').poster ? uni.getStorageSync('brokerageSet').poster : ''
		};
	},
	onLoad() {
		this.handleShare();
	},
	methods: {
		// 保存图片
		save() {
			uni.saveImageToPhotosAlbum({
				filePath: this.path,
				success: result => {
					this.$sun.toast('保存成功，可以去分享啦~');
				},
				fail: err => {
					this.$sun.toast('保存失败，稍后再试');
				}
			});
		},
		// 分享行为
		shareImg() {
			wx.downloadFile({
				url: this.path, //分享的图片的链接
				success: res => {
					wx.showShareImageMenu({
						path: res.tempFilePath
					});
				}
			});
		},
		// 海报生成以后的路径
		getSuccessInfo(e) {
			this.path = e;
			uni.hideLoading();
		},
		// 海报生成失败的路径
		getFailInfo(e) {
			uni.showModal({
				title: '提示',
				content: `${JSON.stringify(e)}`,
				showCancel: false
			});

			this.$sun.delay(2, () => {
				uni.hideLoading();
			});

		},
		handleShare() {
			uni.showLoading({
				title: '海报生成中...'
			});

			if (this.path) {
				this.getSuccessInfo(this.path);
			} else {
				this.basePainter = {
					width: '750rpx',
					height: '1200rpx',
					background: '#fff',
					views: [
						{
							type: 'image',
							url: `${this.bj}`,
							mode: 'widthFix',
							css: {
								// left: '60rpx',
								// top: '26rpx',
								// width: '631rpx',
								height: '1186rpx'
							}
						},
						{
							type: 'image',
							url: `${this.poster}`,
							mode: 'widthFix',
							css: {
								left: '215rpx',
								top: '680rpx',
								width: '320rpx',
								height: '320rpx'
							}
						}
					]
				};
			}
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #fff;
}
.v-distribution-poster {
	.v-btn {
		padding: 50rpx 110rpx;
		.v-sava,
		.v-share {
			border: 2rpx solid #a1a1a1;
			width: 226rpx;
			height: 64rpx;
			view {
				color: #5f5d5d;
				padding-left: 8rpx;
			}
		}
		.v-sava {
			text {
				font-size: 42rpx;
			}
		}
		.v-share {
			text {
				font-size: 24rpx;
			}
		}
	}
}
</style>
